var ApprovalDetail = function () {
  var template = /* html */ `
    <div class="approval-detail">
      <div class="clearfix">
        <div class="label">提交人</div>
        <div>{{record.submitterName}}</div>
      </div>
      <div class="clearfix">
        <div class="label">所在部门</div>
        <div>{{record.deptName}}</div>
      </div>
      <div class="clearfix">
        <div class="label">审批状态</div>
        <div>{{i18n.getMsg('approvalRecord.status.'+record.state)}}</div>
      </div>

      <template v-for="(reimburseInfo,index) in record.reimburseInfoList">
      <div :key="'reimburseInfo_'+index" class="reimburse-detail">
        <div class="interval-title">报销明细({{index+1}})</div>
        <div class="clearfix">
          <div class="label">报销金额(元)</div>
          <div>{{reimburseInfo.price}}</div>
        </div>
        <div class="clearfix">
          <div class="label">报销类别</div>
          <div class="text-data">{{reimburseInfo.reimburseType}}</div>
        </div>
        <div class="clearfix" v-if="reimburseInfo.reason!==''">
          <div class="label">费用明细</div>
          <div class="text-data">{{reimburseInfo.reason}}</div>
        </div>
      </div>
      </template>
      <div class="detail-line"></div>
      <div class="clearfix">
        <div class="label" style="width:auto;">总报销金额(元)</div>
        <div>{{totalPrice}}</div>
      </div>

      <div class="interval"></div>
      <div class="approval-detail-div" v-if="record.image.length>0">
        <div class="label">图片</div>
        <div>
          <imgs-upload readonly v-model="record.image">
          </imgs-upload>
        </div>
      </div>
      <div class="approval-detail-div">
        <div class="label">审批记录</div>
        <div class="approval-detail-table">
          <table cellspacing="0" cellpadding="0">
            <tr v-for="(approvalProcess,index) in processList" :key="'approvalProcess_'+index">
              <td>{{approvalProcess.approverName}}</td>
              <td>{{moment(approvalProcess.approverTime).format('YYYY-MM-DD HH:mm')}}</td>
              <td>{{approvalProcess.status}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      record: {
        type: Object,
        required: true
      }
    },

    computed: {
      totalPrice: function () {
        var reimburseInfoList = this.record.reimburseInfoList;
        var totalPrice = _.sumBy(reimburseInfoList, 'price');
        return totalPrice;
      }
    },

    data: function () {
      return {
        processList: this.getProcessList(),
        i18n: i18n,
        moment: moment
      };
    },

    methods: {
      getProcessList: function () {
        var record = this.record;
        var createTime = record.createTime;
        var approvalProcessList = [{
          approverName: record.submitterName,
          approverTime: moment(createTime).valueOf(),
          status: '提交申请'
        }];

        var processList = record.reimburseProcessList;
        for (var i = 0; i < processList.length; i++) {
          var reimburse = processList[i];
          var status = reimburse.dealwithState;
          var statusStr = i18n.getMsg(`approvalRecord.approvalStats.${status}`);
          approvalProcessList.push({
            approverName: reimburse.approverName,
            approverTime: reimburse.dealwithTime,
            status: statusStr
          });
        }
        return approvalProcessList;
      }
    },

    components: {
      ImgsUpload: ImgsUpload
    },

    template: template
  };
}();